找传奇、传世资源到传世资源站!

星巴克主页

8.5玩家评分(1人评分)
下载后可评
介绍 评论 失效链接反馈

星巴克主页星巴克主页 HTML/CSS-第1张
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿星巴克 | 用每一杯咖啡传递星巴克独特的咖啡体验 </title>
    <link rel="shortcut icon" href="images/logo.svg">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <base href="_blank">
</head>

<body>
    <!-- 项目左边 -->
    <div class="container-left" id="mainnav">
        <div class="menu">
            <div class="menu-left">
                <a href="#"><img src="./images/logo.svg"></a>
            </div>
            <div class="nav">门店</div>
            <div class="nav">我的账户</div>
            <div class="nav">菜单</div>
            <div class="menu-right" id="btnSubnav">
                <img src="./images/icon-menu.svg" alt="">
            </div>
        </div>
        <div class="menu-text">
            <div class="menu-text-top">
                心情惬意,来杯咖啡吧 ☕
            </div>
            <div class="menu-text-bottom">
                <img src="./images/icon-login.svg" alt="">
                <div class="login">登录</div>
                <div class="reges">注册</div>
            </div>
        </div>
    </div>
    <!-- 点击容器左边右上角的三条杠会弹出子导航栏 -->
    <div class="container-left-subnav" id="subnav">
        <div class="menu">
            <div class="menu-left">
                <a href="#"><img src="./images/logo.svg"></a>
            </div>
            <div class="subnav-right" id="subnavClose">
                <img src="./images/x.png" alt="">
            </div>
        </div>
        <div class="subnav-content" >
            <ul class="subnav-content-ul">
                <li><a href="">门店</a></li>
                <li><a href="">星享俱乐部</a></li>
                <li><a href="">菜单</a></li>
                <li><hr/></li>
                <li><a href="">星巴克移动应用</a></li>
                <li><a href="">星礼卡</a></li>
                <li><a href="">星巴克臻选™</a></li>
                <li><a href="">啡快™- 在线点 到店取</a></li>
                <li><a href="">专星送</a></li>
                <li><a href="">咖啡星讲堂</a></li>
                <li><a href="">上海烘焙工坊</a></li>
                <li><a href="">关于星巴克</a></li>
                <li><a href="">帮助中心</a></li>
                <li><hr/></li>
            </ul>
            <img src="./images/icon-login.svg">
            <div class="login">登录</div>
            <div class="reges">注册</div>
            <div class="subnav-bottom-text">
                English | 隐私政策 | 使用条款
            </div>
        </div>
        <div class="subnav-bottom">

        </div>
    </div>

    <!-- 项目右边 -->
    <div class="container-right">
        <!--第一部分 轮播图 -->
        <div class="banner" id="banner">
            <ul class="banner-ul" id="bannerul">
                <li><img src="./images/banner01.jpg"></li>
                <li><img src="./images/banner02.jpg"></li>
                <li><img src="./images/banner03.jpg"></li>
                <li><img src="./images/banner04.jpg"></li>
                <li><img src="./images/banner01.jpg"></li>
            </ul>
            <div class="banner-right-buttom" id="btnNext">
                <img src="./images/right.png">
            </div>
            <div class="banner-promotion">广告</div>
        </div>

        <!-- 第二部分 小图三张 -->
        <div class="promotion">
            <div class="photoShow">
                <a href="https://starbucks.tmall.com/" target="_blank">
                    <img src="./images/page01.jpg">
                </a>
            </div>
            <div class="photoShow">
                <a href="https://www.starbucks.com.cn/design-studio/" target="_blank">
                    <img src="./images/page02.jpg">
                </a>
            </div>
            <div class="photoShow">
                <a href="https://www.starbucks.com.cn/about/careers/" target="_blank">
                    <img src="./images/page03.jpg">
                </a>
            </div>
        </div>

        <!-- 第三部分  咖啡俱乐部 -->
        <div class="club">
            <div class="club-left">
                <div class="club-left-top">星享俱乐部</div>
                <div class="club-left-middle">
                    开启您的星享之旅,星星越多、会员等级越高、<br />
                    好礼越丰富。
                    <a href="">了解更多 ></a>
                </div>
                <div class="club-left-bottom">
                    <span class="left">注册</span>
                    <span class="right">登录</span>
                </div>
            </div>
            <div class="club-right"><img src="./images/club.svg"></div>
        </div>

        <!-- 第四部分 精选,小图四张 -->
        <div class="choice">
            <div class="choice-top">星巴克精选</div>
            <div class="choice-middle">在星巴克天猫旗舰店发现更多咖啡心意</div>
            <div class="choice-bottom">
                <div class="choice-bottom-card">
                    <a href="https://starbucks.tmall.com/p/rd796757.htm" target="_blank">
                        <img src="./images/card01.png">
                        <p class="choice-bottom-card-top">会员新礼包</p>
                        <p class="choice-bottom-card-middle">星享卡新升级<br />更多新意好礼</p>
                        <a href="https://starbucks.tmall.com/p/rd796757.htm" target="_blank">了解更多 ></a>
                    </a>
                </div>
                <div class="choice-bottom-card">
                    <a href="https://starbucks.tmall.com/p/rd993825.htm?spm=a1z10.1-b-s.w5001-14489348230.6.MtuIoi"
                        target="_blank">
                        <img src="./images/card02.png">
                        <p class="choice-bottom-card-top">星礼卡</p>
                        <p class="choice-bottom-card-middle">用一份心礼<br />让心意相随</p>
                        <a href="https://starbucks.tmall.com/p/rd796757.htm" target="_blank">了解更多 ></a>
                    </a>
                </div>
                <div class="choice-bottom-card">
                    <a href="https://starbucks.tmall.com/p/rd103766.htm?spm=a1z10.1-b-s.w5001-14489348230.8.MtuIoi"
                        target="_blank">
                        <img src="./images/card03.png">
                        <p class="choice-bottom-card-top">电子产品券</p>
                        <p class="choice-bottom-card-middle">心意<br />从这一杯开始</p>
                        <a href="https://starbucks.tmall.com/p/rd796757.htm" target="_blank">了解更多 ></a>
                    </a>
                </div>
                <div class="choice-bottom-card">
                    <a href="https://starbucks.tmall.com/category-1141443816.htm?spm=a1z10.1-b-s.w4006-14489348233.10.MtuIoi"
                        target="_blank">
                        <img src="./images/card04.png">
                        <p class="choice-bottom-card-top">咖啡生活</p>
                        <p class="choice-bottom-card-middle">星巴克<br />用心制作</p>
                        <a href="https://starbucks.tmall.com/p/rd796757.htm" target="_blank">了解更多 ></a>
                    </a>
                </div>
            </div>
        </div>

        <!-- 第五部分(最后一部分) 咖啡文化 -->
        <div class="culture">
            <div class="culture-top">1912 派克街 | 咖啡星讲堂</div>
            <div class="culture-middle">了解更多星巴克咖啡文化</div>
            <div class="culture-bottom" id="cultureBottom">
                <ul class="culture-ul" id="cultureUl">
                    <li class="culture-bottom-photo">
                        <a href="https://www.starbucks.com.cn/coffee-blog/the-origin-of-coffee-and-its-cultivation/"
                            target="_blank">
                            <div class="culture-bottom-photo-describe">咖啡知识</div>
                            <img src="./images/coffeeImg01.jpg">
                            <p>咖啡的起源与种植</p>
                        </a>
                    </li>
                    <li class="culture-bottom-photo">
                        <a href="https://www.starbucks.com.cn/coffee-blog/the-4-fundamentals/" target="_blank">
                            <div class="culture-bottom-photo-describe">咖啡品鉴</div>
                            <img src="./images/coffeeImg02.jpg">
                            <p>咖啡调制</p>
                        </a>
                    </li>
                    <li class="culture-bottom-photo">
                        <a href="https://www.starbucks.com.cn/coffee-blog/roast-story/" target="_blank">
                            <div class="culture-bottom-photo-describe">咖啡知识</div>
                            <img src="./images/coffeeImg03.jpg">
                            <p>咖啡烘焙</p>
                        </a>
                    </li>
                    <li class="culture-bottom-photo">
                        <a href="https://www.starbucks.com.cn/coffee-blog/pour-over/" target="_blank">
                            <div class="culture-bottom-photo-describe">咖啡品鉴</div>
                            <img src="./images/coffeeImg04.jpg">
                            <p>手冲咖啡</p>
                        </a>
                    </li>
                </ul>

            </div>
            <!-- 下一个按钮 -->
            <div class="culture-btn-next" id="photoNext">
                <img src="./images/rightarrow.png" alt="">
            </div>
            <div class="culture-btn-pre" id="photoPre">
                <img src="./images/leftarrow.png" alt="">
            </div>
        </div>

        <!-- 报备号 -->
        <div class="final-text">
            <img src="./images/icpicon.png" alt="">
            沪公网安备 31010402000253号 | 沪ICP备17003747号
        </div>
    </div>
    <script type="text/javascript" src="./js/my.js"></script>
</body>

</html>//csspart1/*初始化开始*/
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul li{
list-style:none;
  }
  ol li{
list-style:none;
  }
  .fl{
    float: left;
  }
  .fr{
    float: right;
  }
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  .auto-img {
    width: 100%;
    display: block;
  }
  /* 去掉图片底部缝隙 */
img{
    vertical-align: bottom;
}
@font-face {
  font-family: 'iconfont';
  src: url('../fonts/iconfont.eot');
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/iconfont.woff2') format('woff2'),
      url('../fonts/iconfont.woff') format('woff'),
      url('../fonts/iconfont.ttf') format('truetype'),
      url('../fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  /*初始化结束*/
part2*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
/* 整体容器左边 */
.container-left{
    width: 25%;
    height: auto;
    position: fixed;
    /* background-color: rgba(196, 100, 100, 0.836); */
    float: left;
    top: 0;
    left: 0;
    z-index: 2;
    /* display: none; */
}
.menu{
    height: 50px;
    width: 400px;
    padding: 30px 10px;
}
.menu-left img{
    width: 36px;
    height: 36px;
    float: left;
    margin-left: 20px;
}
.nav{
    margin-left: 20px;
    float: left;
    height: 18px;
    font-weight: 700;
    line-height: 30px;
}
.menu-right{
    float: left;
    margin-left: 100px;
    margin-top: 6px;
    align-items: center;
}
.menu-text{
    width: 300px;
    margin: 250px 50px;
}
.menu-text-top{
    font-size: 26px;
    font-weight: 800;
}
.menu-text-bottom{
    width: 300px;
    height: 100px;
    margin-top: 30px;
}
.menu-text-bottom img{
    width: 28px;
    height: 28px;
    float: left;
}
.login{
    color: #00a862;
    float: left;
    font-size: 17px;
    line-height: 22px;
    margin-left: 10px;
    cursor: pointer;
}
.reges{
    float: left;
    color: #00a862;
    line-height: 15px;
    font-size: 18px;
    padding: 4px 10px;
    border: 1px solid #00a862;
    border-radius: 48px;
    margin-left: 50px;
    padding: 5px 13px;
    cursor: pointer;
}
/* 容器左边右上角的三条杠会弹出子导航栏 */
.container-left-subnav{
    width: 25%;
    float: left;
    position: fixed;
    top: 0px;
    left: 0px;
    
    z-index: 1;
    opacity: 0;
    visibility: hidden; 
    /* 过渡动画的时间与效果 */
    transition: 0.3s ease-in;
}
.subnav-right{
    float: right;
    width: 56px;
    height: 48px;
    position: absolute;
    top: -3;
    right: 0;
    margin-left: 30px;
    
}
.subnav-right img{
    width: 38px;
    height: 38px;
}
.subnav-content{
    padding: 40px 60px 20px;
}
.subnav-content-ul li{
    font-size: 20px;
    margin-bottom: 13px;
    font-weight: bold;
}
.subnav-content-ul a{
    color: black;
}
.subnav-content-ul hr{
    background-color: rgba(128, 128, 128, 0.486);
    margin: 20px 0px;
}
.subnav-content img{
    width: 28px;
    height: 28px;
    float: left;
}
.subnav-bottom-text{
    margin-top: 70px;
    display: inline;
    font-size: 14px;
    float: left;
    color: grey;
    margin-right: 90px;
}

/* 整体右边部分样式 */
.container-right{
    width: 75%;
    height: 1900px;
    float: right;
    /* 隐藏水平滚动条 */
    overflow-x: hidden;
}
.banner{
    width: 1200px;
    height: 520px;
    position: relative;
    overflow: hidden;
}
.banner-ul{
    width: 6000px;
    height: 520px;
    position: absolute;
    /* 轮播图平滑移动 */
    transition: left 1s linear;
    /* left: -1000px; */
}
.banner-ul li{
    float: left;
}
.banner-ul img{
    width: 1200px;
    height: 520px;
}
.banner-right-buttom{
    width: 48px;
    height: 48px;
    position: absolute;
    top: 45%;
    right: 70px;
    /* background-color: #241f1f; */
    transition-duration: 0.5s;
}
.banner-right-buttom img{
    width: 48px;
    height: 48px;
    /* position: relative; */
}
.banner-right-buttom:hover{
    right: 60px;
}
.banner-promotion{
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 14px;
    padding: 2px 4px;
    box-sizing: border-box;
    background-color: rgb(8,47,50);
    color: rgba(253, 253, 253, 0.575);
}
/* 第二部分 小图三张 */
.promotion{
    width: 100%;
    height: 300px;
    padding: 30px 0;
    background-color: rgb(247,247,247);
}
.photoShow{
    float: left;
    width: 28%;
    margin-left: 40px;
    position: relative;
    cursor: pointer;
}
.photoShow img{
    position: relative;
    border-radius: 5px;
    top:10px;
    width: 100%;
    height: 230px;
    transition-duration: 0.4s;
}
/* 悬停浮动效果 */
.photoShow img:hover{
    top: 0px;
    box-shadow: 0px 2px 2.5px 1px #aaa;
}

/* 第三部分 咖啡俱乐部 */
.club{
    /* width: 1200px; */
    width: 100%;
    height: 200px;
    padding: 50px 200px;
}
.club-left{
    float: left;
    width: 50%;
    height: 100px;
}
.club-left-top{
    font-size: 22px;
}
.club-left-middle{
    color: gray;
    margin: 20px 0;
}
.club-left-middle a{
    color: #c2a661;
}
.club-left-bottom{
    float: left;
    width: 300px;
    margin-top: 20px;
}
.club-left-bottom span{
    color: #00a862;
    border: 1px solid #00a862;
    border-radius: 48px;
    font-size: 18px;
    padding: 6px 18px;
    box-sizing: border-box;
    cursor: pointer;
}
.club-right{
    width: 50%;
    height: 100px;
    float: left;
    margin-left: 400px;
    position: relative;
    top: -70%;
    left: 5%;
}
.club-right img{
    width: 80%;
    height: 72px;
}

/* 第四部分 精选,小图四张 */
.choice{
    width: 100%;
    height: 375px;
    margin:30px 0px;
    padding: 15px 200px;
    background-color: rgb(247,247,247);
    box-sizing: border-box;
}
.choice-top{
    font-size: 22px;
    font-weight: bold;
    width: 50%;
    /* position: absolute; */
    margin: 0px 350px;
}
.choice-middle{
    color: gray;
    width: 300px;
    margin: 20px 270px;
}
.choice-bottom{
    width: 100%;
    height: 190px;
    margin-top: 30px;
    float: left;
}
.choice-bottom-card{
    width: 22%;
    height: 180px;
    margin-left: 20px;
    background-color: #ffffff;
    text-align: center;
    box-shadow:0px 0px 0.1px 0.1px rgba(151, 150, 150, 0.5) ;
    position: relative;
    top: 20px;
    left: 2%;
    float: left;
    /* border: 0.1px solid gray; */
    border-radius: 5px;
    transition-duration: 0.5s;
    cursor: pointer;
}
.choice-bottom-card img{
    position: relative;
    top: -30px;
}
.choice-bottom-card:hover{
    top: 10px;
    box-shadow: 0px 2px 2.5px 1px #aaa;
}
.choice-bottom-card a{
    color: #c2a66c;
    font-size: 13px;
}
.choice-bottom-card-top{
    font-weight: bold;
    margin-top: -20px;
    margin-bottom: 10px;
}
.choice-bottom-card-middle{
    color: gray;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 28px;
}

/* 第五部分 */
.culture{
    width: 100%;
    height: 20%;
    padding: 2% 10%;
    box-sizing: border-box;
}
.culture-top{
    font-weight: bold;
    font-size: 22px;
    width: 100%;
    margin: 0 30%;
    margin-bottom: 3%;
}
.culture-middle{
    color: gray;
    font-size: 16px;
    width: 100%;
    margin: 0 34%;
}
.culture-bottom{
    width: 100%;
    height: 30%;
    margin-left: -10%;
    position: relative;
    /* overflow: hidden; */
    /* float: left; */
}
.culture-ul{
    width: 1600px;
    position: absolute;
    /* 平滑移动 */
    transition: 0.5s linear;
    /* 向右平滑移动 */
    /* transition: right 0.5s linear; */
    overflow: hidden;
    box-sizing: border-box;
    padding: 0px 130px;
}
.culture-bottom-photo{
    width: 300px;
    height: 210px;
    float: left;
    margin-top: 4%;
    margin-left: 20px;
    box-shadow:0.5px 0px 0px 0px rgba(128, 128, 128, 0.438) ;
    border-bottom: 0.5px solid rgba(128, 128, 128, 0.438);
    border-right: 0.5px solid rgba(128, 128, 128, 0.438);
    border-radius: 3px;
    position: relative;
    top: 10px;
    transition-duration: 0.5s;
    cursor: pointer;
}
.culture-bottom-photo:first-child{
    margin-left: 70px;
}
.culture-bottom-photo:hover{
    top: 0px;
    /* box-shadow: 0px 2px 2.5px 1px #aaa; */
}
.culture-bottom-photo img{
    width: 100%;
    height: 160px;
}
.culture-bottom-photo-describe{
    position: absolute;
    top: 2%;
    background-color: rgb(194,166,97);
    color: white;
    padding: 6px 10px;
}
.culture-bottom-photo p{
    margin-top: 10px;
    margin-left: 10px;
    color:rgba(0, 0, 0, 0.575);
}
.culture-btn-pre img{
    position: relative;
    top: 0px;
    left: -90px;
    background-color: #fff;
    border-radius: 48px;
    cursor: pointer;
}
.culture-btn-next img{
    position: relative;
    top: 38px;
    right: -950px;
    background-color: #ffffff;
    border-radius: 48px;
    cursor: pointer;
}

/* 最底部的报备号 */
.final-text{
    width: 100%;
    height: 1%;
    text-align: center;
    margin-left: -3%;
    margin-top: 2rem;
}

  

评论

发表评论必须先登陆, 您可以 登陆 或者 注册新账号 !


在线咨询: 问题反馈
客服QQ:174666394

有问题请留言,看到后及时答复